<div class="row">
  <div class="col-md-9">
    {{topic-show topic=model}}

    {{#if isLoadingTopics}}
      <div class="no-result">
        评论加载中...
      </div>
    {{else}}
      {{#if ishaveReplies}}
        <div id="replies" class="panel panel-default">
          <div class="total panel-heading">
            共收到 <b>{{model.replies_count}}</b> 条回复
          </div>
          <div class="items panel-body">
            <!-- 感叹... 来回变. https://github.com/emberjs/ember.js/pull/11461 -->
            {{#each pagedReplies as |reply i|}}
              {{topics-show-reply reply=reply num=i}}
            {{/each}}
          </div>

          {{paginate-toolbar next="nextPage" prev="prevPage" route='topics.show' totalCount=model.replies_count}}
        </div>
      {{else}}
        <div class="no-result">
          暂无回复。
        </div>
      {{/if}}

      {{#if auth.isLogin}}
        <div id="reply" class="panel panel-default">
          <div class="panel-heading">回帖</div>
          <div class="panel-body">

            <div class="editor-toolbar">
              <div class="opts pull-right">
                <!--<span class="dropdown dropdown-small" id="editor-toolbar-insert-code">-->
                <!--<a href="#editor-toolbar-insert-code" data-toggle="dropdown" title="插入代码"><i class="fa fa-code"></i></a>-->
                <!--<ul class="dropdown-menu insert-codes" role="menu">-->
                <!--<li><a data-lang="ruby" href="#">Ruby</a></li>-->
                <!--<li><a data-lang="erb" href="#">HTML / ERB</a></li>-->
                <!--<li><a data-lang="scss" href="#">CSS / SCSS</a></li>-->
                <!--<li><a data-lang="js" href="#">JavaScript</a></li>-->
                <!--<li><a data-lang="yml" href="#">YAML <i>(.yml)</i></a></li>-->
                <!--<li><a data-lang="coffee" href="#">CoffeeScript</a></li>-->
                <!--<li><a data-lang="conf" href="#">Nginx / Redis <i>(.conf)</i></a></li>-->
                <!--<li><a data-lang="python" href="#">Python</a></li>-->
                <!--<li><a data-lang="php" href="#">PHP</a></li>-->
                <!--<li><a data-lang="java" href="#">Java</a></li>-->
                <!--<li><a data-lang="erlang" href="#">Erlang</a></li>-->
                <!--<li><a data-lang="shell" href="#">Shell / Bash</a></li>-->
                <!--</ul>-->
                <!--</span>-->
                {{#uploader-icon succCallBack='appendToReply'}}
                  <span title="上传图片" data-toggle="tooltip"><i class="glyphicon glyphicon-picture"></i></span>
                {{/uploader-icon}}
              </div>
              <ul class="nav nav-pills" style="clear:none;">
                {{#tab-item tab='edit' activeTab=activeTab tagName='li'}}
                  <a href="#" {{action 'selectTab' 'edit'}}>编辑</a>
                {{/tab-item}}

                {{#tab-item tab='preview' activeTab=activeTab tagName='li'}}
                  <a href="#" {{action 'selectTab' 'preview'}}>预览</a>
                {{/tab-item}}
              </ul>
            </div>

            <form class="new_reply" id="new_reply" {{action 'combSubmit'}} method="post">

              <div class="form-group tab-content">
                {{#tab-item tab='edit' activeTab=activeTab class='tab-pane'}}
                  {{ex-text value=replyContent replies=pagedReplies tabindex='1' class='topic-editor form-control' key-down='combSubmit'}}
                {{/tab-item}}

                {{#tab-item tab='preview' activeTab=activeTab class='tab-pane'}}
                  <div class="preview markdown">
                    {{{mark-down replyContent}}}
                  </div>
                {{/tab-item}}
              </div>
              <div class="submit-buttons">
                {{input type='submit' id='reply-button' disabled=isProcessing class='btn btn-primary' value='提交回复'}}

                <span class="help-inline" title="或者 Ctrl + Enter"><kbd>Command</kbd> + <kbd>Enter</kbd></span>

                <div class="pull-right"><a href="https://ruby-china.org/markdown" target="_blank">排版说明</a></div>
              </div>

              <div class="dropzone dz-preview"></div>
            </form>
          </div>
        </div>
      {{/if}}
    {{/if}}
  </div>

  <div class="col-md-3">
  </div>
</div>
